Solid Router: Ovladavanje navigacijom na strani klijenta u SolidJS-u

SolidJS, poznat po svojim iznimnim performansama i jednostavnosti, pruža fantastičan temelj za izradu modernih web aplikacija. Za stvaranje istinski privlačnih i korisnički ugodnih iskustava, neophodan je robustan usmjerivač na strani klijenta. Tu nastupa Solid Router, službeni i preporučeni usmjerivač za SolidJS, dizajniran za besprijekornu integraciju s reaktivnim principima okvira.

Ovaj sveobuhvatni vodič zaronit će u svijet Solid Routera, pokrivajući sve od osnovne postave do naprednih tehnika za izradu složenih i dinamičnih jednostraničnih aplikacija (SPA). Bilo da ste iskusni SolidJS programer ili tek počinjete, ovaj članak će vas opremiti znanjem i vještinama za ovladavanje navigacijom na strani klijenta.

Što je Solid Router?

Solid Router je lagan i učinkovit usmjerivač na strani klijenta, posebno dizajniran za SolidJS. Koristi reaktivnost SolidJS-a za učinkovito ažuriranje korisničkog sučelja na temelju promjena u URL-u preglednika. Za razliku od tradicionalnih usmjerivača koji se oslanjaju na virtualno DOM uspoređivanje, Solid Router izravno manipulira DOM-om, što rezultira bržim i predvidljivijim performansama.

Ključne značajke Solid Routera uključuju:

• Deklarativno usmjeravanje: Definirajte svoje rute koristeći jednostavan i intuitivan API temeljen na JSX-u.
• Dinamičko usmjeravanje: Lako rukujte rutama s parametrima, što vam omogućuje stvaranje dinamičnih aplikacija vođenih podacima.
• Ugniježđene rute: Organizirajte svoju aplikaciju u logičke odjeljke pomoću ugniježđenih ruta.
• Komponenta za poveznice: Besprijekorno se krećite između ruta pomoću komponente <A>, koja automatski upravlja ažuriranjem URL-a i stiliziranjem aktivnih poveznica.
• Učitavanje podataka: Asinkrono učitajte podatke prije iscrtavanja rute, osiguravajući glatko korisničko iskustvo.
• Prijelazi: Stvorite vizualno privlačne prijelaze između ruta kako biste poboljšali korisničko iskustvo.
• Rukovanje greškama: Elegantno rukujte greškama i prikažite prilagođene stranice s greškama.
• Integracija s History API-jem: Besprijekorno se integrira s History API-jem preglednika, omogućujući korisnicima navigaciju pomoću gumba za natrag i naprijed.

Početak rada sa Solid Routerom

Instalacija

Da biste instalirali Solid Router, koristite željeni upravitelj paketa:

            npm install @solidjs/router
yarn add @solidjs/router
pnpm add @solidjs/router
            

              
                Copy
              
            
          

Osnovna postava

Srž Solid Routera vrti se oko komponenti <Router> i <Route>. Komponenta <Router> djeluje kao korijen sustava usmjeravanja vaše aplikacije, dok komponente <Route> definiraju mapiranje između URL-ova i komponenti.

Evo osnovnog primjera:

            import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <Route path="/"> <Home/> </Route>
      <Route path="/about"> <About/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

U ovom primjeru, komponenta <Router> obuhvaća cijelu aplikaciju. Komponente <Route> definiraju dvije rute: jednu za korijensku putanju ("/") i drugu za "/about" putanju. Kada korisnik dođe na bilo koju od ovih putanja, iscrtat će se odgovarajuća komponenta (Home ili About).

Komponenta <A>

Za navigaciju između ruta, koristite komponentu <A> koju pruža Solid Router. Ova komponenta je slična običnoj HTML oznaci <a>, ali automatski upravlja ažuriranjem URL-a i sprječava ponovno učitavanje cijele stranice.

            import { A } from '@solidjs/router';

function Navigation() {
  return (
    <nav>
      <A href="/">Home</A>
      <A href="/about">About</A>
    </nav>
  );
}

export default Navigation;
            

              
                Copy
              
            
          

Kada korisnik klikne na jednu od ovih poveznica, Solid Router će ažurirati URL preglednika i iscrtati odgovarajuću komponentu bez pokretanja ponovnog učitavanja cijele stranice.

Napredne tehnike usmjeravanja

Dinamičko usmjeravanje s parametrima rute

Solid Router podržava dinamičko usmjeravanje, omogućujući vam stvaranje ruta s parametrima. To je korisno za prikazivanje sadržaja na temelju određenog ID-a ili "sluga".

            import { Router, Route } from '@solidjs/router';
import UserProfile from './components/UserProfile';

function App() {
  return (
    <Router>
      <Route path="/users/:id"> <UserProfile/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

U ovom primjeru, segment :id u putanji je parametar rute. Da biste pristupili vrijednosti parametra id unutar komponente UserProfile, možete koristiti hook useParams:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

Hook useParams vraća objekt koji sadrži parametre rute. U ovom slučaju, params.id će sadržavati vrijednost parametra id iz URL-a. Zatim se koristi hook createResource za dohvaćanje korisničkih podataka na temelju ID-a.

Međunarodni primjer: Zamislite globalnu platformu za e-trgovinu. Mogli biste koristiti dinamičko usmjeravanje za prikaz detalja proizvoda na temelju ID-a proizvoda: /products/:productId. To vam omogućuje jednostavno stvaranje jedinstvenih URL-ova za svaki proizvod, olakšavajući korisnicima dijeljenje i označavanje određenih artikala, bez obzira na njihovu lokaciju.

Ugniježđene rute

Ugniježđene rute omogućuju vam organiziranje aplikacije u logičke odjeljke. To je posebno korisno za složene aplikacije s više razina navigacije.

            import { Router, Route } from '@solidjs/router';
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import Settings from './components/Settings';

function App() {
  return (
    <Router>
      <Route path="/dashboard">
        <Dashboard/>
        <Route path="/profile"> <Profile/> </Route>
        <Route path="/settings"> <Settings/> </Route>
      </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

U ovom primjeru, komponenta <Dashboard> djeluje kao spremnik za komponente <Profile> i <Settings>. Rute <Profile> i <Settings> ugniježđene su unutar rute <Dashboard>, što znači da će se iscrtati samo kada je korisnik na putanji "/dashboard".

Da biste iscrtali ugniježđene rute unutar komponente <Dashboard>, trebate koristiti komponentu <Outlet>:

            import { Outlet } from '@solidjs/router';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <A href="/dashboard/profile">Profile</A>
        <A href="/dashboard/settings">Settings</A>
      </nav>
      <Outlet/>
    </div>
  );
}

export default Dashboard;
            

              
                Copy
              
            
          

Komponenta <Outlet> djeluje kao mjesto gdje će se iscrtati ugniježđene rute. Kada korisnik dođe na "/dashboard/profile", komponenta <Profile> će se iscrtati unutar komponente <Outlet>. Slično, kada korisnik dođe na "/dashboard/settings", komponenta <Settings> će se iscrtati unutar komponente <Outlet>.

Učitavanje podataka pomoću createResource

Asinkrono učitavanje podataka prije iscrtavanja rute ključno je za pružanje glatkog korisničkog iskustva. Solid Router se besprijekorno integrira s hookom createResource iz SolidJS-a, čineći učitavanje podataka vrlo jednostavnim.

Vidjeli smo primjer ovoga ranije u komponenti UserProfile, ali evo ga ponovno radi jasnoće:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

Hook createResource prima dva argumenta: signal koji pokreće učitavanje podataka i funkciju koja dohvaća podatke. U ovom slučaju, signal je () => params.id, što znači da će se podaci dohvatiti svaki put kada se parametar id promijeni. Funkcija fetchUser dohvaća korisničke podatke s API-ja na temelju ID-a.

Hook createResource vraća polje koje sadrži resurs (dohvaćene podatke) i funkciju za ponovno dohvaćanje podataka. Resurs je signal koji sadrži podatke. Podacima možete pristupiti pozivanjem signala (user()). Ako se podaci još uvijek učitavaju, signal će vratiti undefined. To vam omogućuje prikazivanje indikatora učitavanja dok se podaci dohvaćaju.

Prijelazi

Dodavanje prijelaza između ruta može značajno poboljšati korisničko iskustvo. Iako Solid Router nema ugrađenu podršku za prijelaze, dobro se integrira s bibliotekama poput solid-transition-group kako bi se postigli glatki i vizualno privlačni prijelazi.

Prvo, instalirajte paket solid-transition-group:

            npm install solid-transition-group
yarn add solid-transition-group
pnpm add solid-transition-group
            

              
                Copy
              
            
          

Zatim, omotajte svoje rute komponentom <TransitionGroup>:

            import { Router, Route } from '@solidjs/router';
import { TransitionGroup, Transition } from 'solid-transition-group';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <TransitionGroup>
        <Route path="/">
          <Transition name="fade" duration={300}>
            <Home/>
          </Transition>
        </Route>
        <Route path="/about">
          <Transition name="fade" duration={300}>
            <About/>
          </Transition>
        </Route>
      </TransitionGroup>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

U ovom primjeru, svaka ruta je omotana komponentom <Transition>. Svojstvo name specificira prefiks CSS klase za prijelaz, a svojstvo duration specificira trajanje prijelaza u milisekundama.

Morat ćete definirati odgovarajuće CSS klase za prijelaz u svojoj stilskoj datoteci:

            .fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}
            

              
                Copy
              
            
          

Ovaj CSS kod definira jednostavan prijelaz pojavljivanja/nestajanja (fade-in/fade-out). Kada se ruta unese, primjenjuju se klase .fade-enter i .fade-enter-active, što uzrokuje pojavljivanje komponente. Kada se ruta napusti, primjenjuju se klase .fade-exit i .fade-exit-active, što uzrokuje nestajanje komponente.

Rukovanje greškama

Elegantno rukovanje greškama ključno je za pružanje dobrog korisničkog iskustva. Solid Router nema ugrađeno rukovanje greškama, ali ga možete jednostavno implementirati koristeći globalnu granicu grešaka (error boundary) ili rukovatelja greškama specifičnog za rutu.

Evo primjera globalne granice grešaka:

            import { createSignal, Suspense, ErrorBoundary } from 'solid-js';
import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  const [error, setError] = createSignal(null);

  return (
    <ErrorBoundary fallback={<p>Something went wrong: {error()?.message}</p>}>
      <Suspense fallback={<p>Loading...</p>}>
        <Router>
          <Route path="/"> <Home/> </Route>
          <Route path="/about"> <About/> </Route>
        </Router>
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;
            

              
                Copy
              
            
          

Komponenta <ErrorBoundary> hvata sve greške koje se dogode unutar njezine djece. Svojstvo fallback specificira komponentu koja će se iscrtati kada dođe do greške. U ovom slučaju, iscrtava odlomak s porukom o grešci.

Komponenta <Suspense> upravlja obećanjima (promises) koja su na čekanju, što se obično koristi s asinkronim komponentama ili učitavanjem podataka. Prikazuje `fallback` svojstvo dok se obećanja ne razriješe.

Da biste izazvali grešku, možete izbaciti iznimku unutar komponente:

            function Home() {
  throw new Error('Failed to load home page');

  return <h1>Home</h1>;
}

export default Home;
            

              
                Copy
              
            
          

Kada se ovaj kod izvrši, komponenta <ErrorBoundary> će uhvatiti grešku i iscrtati zamjensku (fallback) komponentu.

Međunarodna razmatranja: Prilikom prikazivanja poruka o greškama, razmislite o internacionalizaciji (i18n). Koristite biblioteku za prevođenje kako biste pružili poruke o greškama na korisnikovom željenom jeziku. Na primjer, ako korisnik u Japanu naiđe na grešku, trebao bi vidjeti poruku o grešci na japanskom, a ne na engleskom.

Najbolje prakse za korištenje Solid Routera

• Organizirajte svoje rute: Koristite ugniježđene rute za organiziranje aplikacije u logičke odjeljke. To će olakšati održavanje i snalaženje u kodu.
• Koristite parametre rute za dinamički sadržaj: Koristite parametre rute za stvaranje dinamičnih URL-ova za prikazivanje sadržaja na temelju određenog ID-a ili "sluga".
• Učitavajte podatke asinkrono: Učitavajte podatke asinkrono prije iscrtavanja rute kako biste osigurali glatko korisničko iskustvo.
• Dodajte prijelaze između ruta: Koristite prijelaze kako biste poboljšali korisničko iskustvo i učinili da vaša aplikacija izgleda profinjenije.
• Rukujte greškama elegantno: Implementirajte rukovanje greškama kako biste uhvatili i prikazali greške na korisnički prihvatljiv način.
• Koristite opisne nazive ruta: Odaberite nazive ruta koji točno odražavaju sadržaj rute. To će olakšati razumijevanje strukture vaše aplikacije.
• Testirajte svoje rute: Napišite jedinične testove kako biste osigurali da vaše rute ispravno rade. To će vam pomoći da rano uhvatite greške i spriječite regresije.

Zaključak

Solid Router je moćan i fleksibilan usmjerivač na strani klijenta koji se besprijekorno integrira sa SolidJS-om. Ovladavanjem njegovim značajkama i slijedeći najbolje prakse, možete izgraditi složene i dinamične jednostranične aplikacije koje pružaju glatko i privlačno korisničko iskustvo. Od osnovne postave do naprednih tehnika poput dinamičkog usmjeravanja, učitavanja podataka i prijelaza, ovaj vodič vam je pružio znanje i vještine za samouvjereno snalaženje u svijetu navigacije na strani klijenta u SolidJS-u. Prihvatite snagu Solid Routera i otključajte puni potencijal svojih SolidJS aplikacija!

Ne zaboravite konzultirati službenu dokumentaciju Solid Routera za najnovije informacije i primjere: [Poveznica na dokumentaciju Solid Routera - Placeholder]

Nastavite stvarati nevjerojatne stvari sa SolidJS-om!